<template>
  <div class="mv-simi" v-if="mvDatas">
    <template v-for="item in mvDatas" :key="item.id">
      <card-item :item="item" v-bind="configObj">
        <template #musictop>
          <div></div>
        </template>
        <template #userName="scope">
          <div class="dt-right">
            <span>{{ $filters.formatMusicTime(scope.row.duration) }}</span>
          </div>
        </template>
      </card-item>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, defineExpose } from 'vue'
import CardItem from '@/base-ui/card-item'
import { getMusicSimi } from '@/service/now-music'

const props = defineProps({
  musicid: {
    type: Number,
    required: true
  }
})

const configObj = {
  playShow: false,
  topShow: false,
  cardType: 'music',
  userShow: true,
  imgUrl: 'picUrl',
  wth: '150px',
  mtop: '5px',
  mbom: '0px'
}

const emit = defineEmits(['handleTop'])

const mvDatas = ref()
getSimi(props.musicid)
function getSimi(id: number) {
  getMusicSimi(id).then((res: any) => {
    mvDatas.value = res.songs
    emit('handleTop')
  })
}
defineExpose({
  getSimi
})
</script>

<style scoped lang="less">
.mv-simi {
  display: flex;
  flex-wrap: wrap;
  .dt-right {
    text-align: right;
    padding-right: 8px;
  }
}
</style>
